<template>
    <el-container>
        <el-header style="text-align: center;">
            <el-row>
                <el-col :span="23">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">登录页</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/main/sysStudent">成绩查询</a></el-breadcrumb-item>
                        <el-breadcrumb-item>分页查询</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <h1>成绩增删改查</h1>
        </el-header>
        <!-- el-main 是elementUI的布局容器，用于放置页面的主要内容，
         类似的还有el-container、el-aside、el-footer、el-header -->
        <el-main style=" justify-content: center; align-items: center;">
            <el-form :model="sysStudent" :inline="true" align="center">
                <!-- 这里传studentNo，不能传studentName，不这么干,存在风险 -->
            <el-form-item label="学生姓名" prop="studentName">  
            <el-select :clearable="true" v-model="chooseStudentNo" placeholder="请选择学生">
            <el-option
            v-for="(item, index) in sysStudentList"
            :key="index"
            :label="item.studentName"
            :value="item.studentNo">
            </el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getList(chooseStudentNo)">搜索</el-button>
              <!-- <el-button type="info" icon="el-icon-refresh" @click="clearSelection()">重置</el-button> -->
            </el-form-item>
          </el-form>

            <el-table :data="sysStudentList" stripe style="overflow:scroll;height: 90vh;width: 82vw; margin: 0 auto;">
                <!-- 查询列表的表格，要与pojoTestTable绑定 -->
                 <div style="text-align: center; margin-top: 20px;">
                <el-table-column type="expand">
                  
                    <template slot-scope="props">
                    <div class="expand-row">
                            <span class="expand-label">成绩记录:</span>
                            <div class="expand-value" >
                                <div v-if="props.row.sysResultList.length > 0">
                                     
                                    <div v-for="(result, index) in props.row.sysResultList" :key="index" class="result-item">
                                        
                                        <el-tag type="warning">
                                            <span>{{ result.examDate }}</span>
                                        </el-tag>
                                        <el-tag :type="result.studentResult >= 60 ? 'success' : 'danger'">
                                            {{ result.studentResult }} 分
                                        </el-tag>
                                        <el-tag>
                                            {{ props.row.sysSubjectList[index].subjectName }} 
                                        </el-tag>
                                        <el-tag type="info">
                                            {{ props.row.sysSubjectList[index].grade.gradeName }} 
                                        </el-tag>
                                        
                                    </div>
                                   
                                </div>
                                <span v-else>暂无成绩记录</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                </div>

                <el-table-column type="index" label="序号" width="50px" align="center">
                </el-table-column>
                <el-table-column prop="studentName" label="学生姓名" width="auto" align="center">
                </el-table-column>

                <el-table-column align="center" label="删除" width="80px" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="修改" width="80px" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="getById(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
                
            </el-table>

        </el-main>
    </el-container>
</template>
<script>
export default {
    name: 'SysResult',
    data() {
        return {
            sysStudentList: [],
            chooseStudentNameList: [],
            chooseStudentNo: '',
            sysStudent: {
                studentNo: null,
                studentName: "",
                sysSubjectList:[],
                sysResultList: [],
            }
        };
    },
    mounted: function () {
        this.getList();
    },
    watch: {
        chooseStudentNo: function (newVal) {
            console.log("学生选择：" + newVal);
            this.getList(newVal);
        }
    },
    methods: {

        getList(chooseStudentNo) {
            console.log("选择的学生：" + chooseStudentNo);
            if (chooseStudentNo === undefined || chooseStudentNo === null || chooseStudentNo === '') {
                this.sysStudent.studentNo = '';
            } else {
                this.sysStudent.studentNo = chooseStudentNo;
            }
            this.$axios.get('http://127.0.0.1:8082/result/getList', {params: this.sysStudent})
                .then(res => {
                this.sysStudentList = res.data.data;
                console.log("查出了学生成绩！！",this.sysStudentList);
            }).catch(err => {
                console.log(err);
            });
        },

        /**
         * 选择行对象
         * @param rows 行数据
         */
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);

                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.names = selection.map(item => item.name);
            console.log(this.ids);
            console.log(this.names);
        },
    }
};
</script>
<style scoped>

</style>